<template>
    <LoginBase title="找回密码">
        <a-steps :current="current">
            <a-step title="验证账号"></a-step>
            <a-step title="重置密码" />
        </a-steps>

        <div class="rp-view" v-show="current == 0">
            <a-form ref="validateFormRef" :model="validateRequest" :rules="validateFormRules">
                <a-form-item name="Account">
                    <a-input size="large" v-model:value="validateRequest.Account" placeholder="输入手机号或者邮箱号" />
                </a-form-item>
                <a-form-item>
                    <a-button size="large" block type="primary" :loading="loading" @click="validateAccount">验证账号
                    </a-button>
                </a-form-item>
            </a-form>
        </div>


        <div class="rp-view" v-show="current == 1">
            <a-form ref="passwordFormRef" :model="passwordRequest" :rules="passwordFormRules">
                <a-form-item>
                    <a-input size="large" placeholder="验证码" v-model:value="passwordRequest.Code" />
                </a-form-item>
                <a-form-item>
                    <a-input-password size="large" placeholder="新密码" v-model:value="passwordRequest.Password" />
                </a-form-item>
                <a-form-item>
                    <a-input-password size="large" placeholder="确认新密码" v-model:value="passwordRequest.VerifyPassword" />
                </a-form-item>
            </a-form>
            <a-form-item>
                <a-button size="large" block type="primary" :loading="loading" @click="resetPassword">确定</a-button>
            </a-form-item>
        </div>
        </LoginBase>
</template>
<script lang="ts" setup>
import { ref, withDefaults, defineProps } from "vue";
import LoginBase from "./LoginBase.vue";
import { UserService } from "@/services/User/UserService";
import { UserDto } from "@/models/User/UserDto";
import { UserContext } from "@/utils/UserContext";
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue';
import { UIForm } from "@/utils/UIForm";
import { HttpClient } from "@/utils/HttpClient";
import { MessageBox } from "@/utils/MessageBox";

const loading = ref(false);
const current = ref(0);

const validateFormRef = ref();
const validateRequest = ref({
    Account: ""
});
const validateFormRules = {
    Account: [
        { required: true, message: '请输入手机号或者邮箱号或者邮箱号' }]
};



//验证账号
const validateAccount = async () => {
    if (!await UIForm.Validate(validateFormRef)) {
        return;
    }

    var rs = await HttpClient.post("User/RetrievePassword", validateRequest.value, false);
    if (rs.code == 0) {
        current.value = 1;
        message.info(rs.msg);
    } else {
        message.error(rs.msg);
    }
}


const passwordFormRef = ref();
const passwordRequest = ref({
    Code: "",
    Password: "",
    VerifyPassword: ""
});
const passwordFormRules = {
    Code: [
        { required: true, message: '请输入验证码' }],
    Password: [
        { required: true, message: '请输入密码' },
        {
            pattern: /^[a-z0-9]{3,20}$/i, message: "密码只能由3-20位英文和数字组成"
        }],
};


//修改密码
const resetPassword = async () => {
    if (!await UIForm.Validate(passwordFormRef)) {
        return;
    }
    if (passwordRequest.value.Password != passwordRequest.value.VerifyPassword) {
        message.error("两次密码输入不正确");
        return;
    }

    var rs = await HttpClient.post("User/ResetPassword", passwordRequest.value, false);
    if (rs.code == 0) {
        message.info("密码重置成功,正在跳转到登录页面");
        setTimeout(function () {
            location.href = "/user/login";
        }, 1000)
    } else {
        message.error(rs.msg);
    }
}

</script>
<style  scoped>
.rp-view {
    margin-top: 20px;
}
</style>